<script setup lang="ts">
import {reactive, ref, watch, defineProps} from "vue";
import {ButtonMaterialType, InputMaterialType} from "@/data-type/material.type";
const props = defineProps<{material:ButtonMaterialType}>();
let formState = reactive<InputMaterialType>(props.material);
const defaultProps = {
  type: 'button',
  props: {
    text: '按钮',
    btnType: 'default'
  }
}
formState.props = Object.assign(defaultProps.props, formState.props?formState.props:{});
watch(props, (newValue, oldValue)=>{
  formState = newValue.material;
});
</script>

<template>
  <div class="zhtt-material-button">
    <a-button :type="props.material?.props?.btnType || defaultProps.props.btnType">{{props.material?.props?.text || defaultProps.props.text}}</a-button>
  </div>
</template>

<style scoped>
.zhtt-material-button{
  display: inline-block;
}
</style>
